import React from 'react'

import { Flex } from 'antd-mobile'

import styles from './index.module.css'

// 条件筛选栏标题数组：
const titleList = [
  { title: '区域', type: 'area' },
  { title: '方式', type: 'mode' },
  { title: '租金', type: 'price' },
  { title: '筛选', type: 'more' }
]

export default function FilterTitle({titleSelectedStatus,onClick}) {
  return (
    <Flex align="center" className={styles.root}>
     
      {titleList.map(item=>{
        const isSelected = titleSelectedStatus[item.type]
        return (<Flex.Item key={item.type} onClick={()=>onClick(item.type)}>
          {/* 选中类名： selected */}
          <span className={[styles.dropdown, isSelected?styles.selected:''].join(' ')}>
            <span>{item.title}</span>
            <i className="iconfont icon-arrow" />
          </span>
        </Flex.Item>)})
      }
      </Flex>
  )
}
